<template>
  <div class="core-main-wrap">
    <example-title>
      <template #title>{{ $t('example.pin-input') }}</template>
      <template #describe>{{ $t('example.single-char-input') }}</template>
    </example-title>
    <div class="captcha-warp-content display-flex display-column">
      <example-card>
        <template #title>{{ $t('example.basic-example') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-pin-input
              v-model="value1"
              @complete="complete1"
            ></core-pin-input>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.error-state') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-pin-input
              v-model="value2"
              :error="error2"
              @complete="complete2"
              @incomplete="incomplete2"
            ></core-pin-input>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.resize') }}</template>
        <template #default>
          <div
            class="captcha-warp display-flex flex-align flex-justify display-column"
            style="gap: 10px"
          >
            <core-pin-input size="large" v-model="value3"></core-pin-input>
            <core-pin-input size="default" v-model="value3"></core-pin-input>
            <core-pin-input size="small" v-model="value3"></core-pin-input>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.placeholder') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-pin-input v-model="value4" placeholder="1"></core-pin-input>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.read-only') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-pin-input v-model="value5" readonly></core-pin-input>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.disabled') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-pin-input v-model="value6" disabled></core-pin-input>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.password-input') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-pin-input v-model="value7" mask></core-pin-input>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.only-numbers') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-pin-input v-model="value8" type="numeric"></core-pin-input>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.custom-length') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-pin-input v-model="value9"></core-pin-input>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.clear-data') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-pin-input
              v-model="value10"
              ref="pinInput10Ref"
            ></core-pin-input>
            <el-button
              @click="pinInput10Ref?.clear()"
              type="primary"
              style="margin-left: 12px"
              >{{ $t('example.clear') }}</el-button
            >
            <el-button @click="pinInput10Ref?.focus()" type="primary">{{
              $t('example.focus')
            }}</el-button>
          </div>
        </template>
      </example-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import ExampleTitle from '../components/example-title/index.vue'
import ExampleCard from '../components/example-card/index.vue'
import { ref, useTemplateRef } from 'vue'
import type { CorePinInputInstance } from '@/components/CorePinInput'

const value1 = ref(['', '', '', ''])
const complete1 = (val: string[]) => {
  alert(val.join(''))
}

const value2 = ref(['', '', '', ''])
const error2 = ref(false)
const complete2 = () => {
  error2.value = false
}
const incomplete2 = () => {
  error2.value = true
}

const value3 = ref(['', '', '', ''])
const value4 = ref(['', '', '', ''])
const value5 = ref(['1', '2', '3', '4'])
const value6 = ref(['', '', '', ''])
const value7 = ref(['', '', '', ''])
const value8 = ref(['', '', '', ''])
const value9 = ref(['', '', '', '', '', ''])

const pinInput10Ref = useTemplateRef<CorePinInputInstance>('pinInput10Ref')
const value10 = ref(['', '', '', '', '', ''])

defineOptions({
  name: 'CoreExamplePinInput'
})
</script>

<style scoped lang="scss">
.captcha-warp-content {
  gap: 20px;
}
</style>
